<template>
  <div id="cornerComment" v-if="dialogVisible">
    <div class="cornerComment-in" ref="dialogBox">
      <div class="cornerComment-in-title">
        <!--        type 0 学生 2 职工-->
        <span>【{{ floorStudentOption.corner.name }}】当前学生</span>
        <span class="el-icon-circle-close close-Btn-line" @click="closePOpup"></span>
      </div>
      <div class="commentBody">
        <div class="corner-a">
          <div class="corner-left">
            <div class="corner-student" v-if="studentList.length">
              <!--              :style="{width: div_box_width+'px'}"-->
              <div class="corner-student-list" v-for="item in studentList" :key="item.id">
                <!--                :style="{width: img_width+'px'}"-->
                <div class="corner-student-list-in">
                  <div class="corner-student-list-postion"
                       :style="{height: (img_height)+'px',width: img_width+'px'}" @click="showIdBox=item.student_id">
                    <div class="corner-student-list-img">

                      <!--                      :class="getStudentStatus(item.student_id)==3?'leaveUser':''"-->
                      <div class="student-img-box">
                        <el-image
                            :style="{width: img_width+'px', height: img_height+'px'}"
                            :src="item.student.pic"></el-image>
                      </div>
                    </div>
                  </div>
                  <div class="corner-student-list-name">
                    <p>{{ item.student.name }}【{{ item.classes.class_name }}】</p>
                    <p>采集时间：<i :class="{'erroTime': !item.pic_time}">{{ item.pic_time ? item.pic_time : '今日未采集' }}</i>
                    </p>
                    <p>点评时间：<i
                        :class="{'erroTime': !item.score_time}">{{ item.score_time ? item.score_time : '本周未点评' }}</i>
                    </p>
                    <p>签到时间：<i :class="{'erroTime': !item.start_time}">{{
                        item.start_time ? item.start_time : '今日未签到'
                      }}</i></p>
                    <p>签&ensp;&ensp;&ensp;&ensp;退：<i :class="{'erroTime': !item.end_time,'successTime':item.end_time}">{{
                        item.end_time ? '今日已签退' : '今日未签退'
                      }}</i></p>
                    <p>采集次数：{{ item.comment_number }}</p>
                    <p>评价次数：{{ item.score_number }}</p>
                    <!--                    <p>水平状态：<i @click.stop="checkStudentOption(item)" class="clickBtn">查看</i></p>-->
                    <p>累计时长：{{ item.all_time }}分钟</p>
                  </div>
                </div>
              </div>
            </div>
            <div :style="{height: (boxHeight-50)+'px'}" v-else>
              <p>未找到相关数据</p>
            </div>
          </div>
        </div>
      </div>
      <div class="cornerComment-in-footer">
        <el-button @click="closePOpup" size="small">确定</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import {cornerApply} from "@/api/admin/corner"

export default {
  props: ['visible', 'floorStudentOption'], // commoent 学生点评 collection 学生采集
  components: {},
  data() {
    return {
      dialogVisible: false,
      boxHeight: 0,
      div_box_width: 0,
      img_height: 0,
      img_width: 0,
      studentList: [],
    }
  },
  watch: {
    visible() {
      this.dialogVisible = this.visible
      if (this.visible) {
        let n = this;
        // this.getSocket(this.cornerDetail.facility_code)
        this.cornerStudentFn() // 今日预约的学生 计时
        this.$nextTick(() => {
          n.boxHeight = n.$refs.dialogBox.offsetHeight;
          n.boxWidth = n.$refs.dialogBox.offsetWidth; // 计算单个宽度 一排 8 个
          n.div_box_width = (n.boxWidth - 20) / 11; // 一寸照片 413*295
          // 单张的宽度 n.div_box_width*.9
          let a_width = n.div_box_width * .8;
          // img_height: 0,
          n.img_width = n.div_box_width * .8
          if (a_width < 295) {
            n.img_height = (a_width / 295) * 413
          }
          if (a_width === 295) {
            n.img_height = 413
          }
          if (a_width > 295) {
            n.img_height = (295 / a_width) * 413
          }
        })
        // this.InitFn()
      } else {
        this.studentList = [];
        // this.clearWord()
      }
    }
  },
  created() {
  },
  methods: {
    // 当前区角学生 cornerApply
    cornerStudentFn() {
      cornerApply({
        corner_id: this.floorStudentOption.corner.corner,
        page: 0
      }).then(res => {
        console.log('res:', res)
        for (let item of res.list) {
          if (item.score_time) {
            item.score_time = this.timeChangeFn(item.score_time)
          }
          if (item.pic_time) {
            item.pic_time = this.timeChangeFn(item.pic_time)
          }
        }
        this.studentList = res.list;
      })
    },
    // 关闭弹窗
    closePOpup() {
      this.$emit('update:visible', false)
    },
    getJson(option) {
      return JSON.parse(JSON.stringify(option))
    },
    // 初始化
    async InitFn() {
      let option = this.getJson(this.searWord)
      option.p = this.page.pageindex
      option.corner_id = this.floorStudentOption.corner.corner
      let data = await this.$fetch(this.api.floor.corner_student, option);
      if (!data.code) {
        this.arryList = data.list
      }
    },
    // 搜索组件
    searchFn(option) {
      this.page.pageindex = 1
      if (option === 'refresh') {
        this.clearWord()
      } else {
        if (this.value1) {
          this.searWord.start_time = this.value1[0]
          this.searWord.end_time = this.value1[1]
        } else {
          this.searWord.start_time = '';
          this.searWord.end_time = '';
        }
      }
      this.InitFn()
    },
    // 分页
    handleSizeChange(val) {
      this.page.pageindex = val
      this.InitFn()
    },
    clearWord() {
      this.value1 = []
      this.healthname = ''
      this.searWord.start_time = ''
      this.searWord.end_time = ''
      this.searWord.name = ''
      this.searWord.is_green = ''
      this.searWord.is_other_green = ''
      this.searWord.is_temperature = ''
    },
    addActive(id) {
      this.healthId = id;
      this.healthdetailvisible = true;
      // this.$router.push('/healthEdit?id=' + id)
    },
    // 更新值
    updateVal(option) {
      // console.log('变更数据收到的数据内容：', option)
      if (option.input) {
        this.searWord[option['input'].name] = option['input'].valueText
      } else if (option.select) {
        for (let i in option.select) {
          if (option.select[i].name) {
            this.searWord[option.select[i].name] = option.select[i].valueText
          } else {
            this.searWord[option.select[i - 1].name] = option.select[i].valueText ? option.select[i].valueText : option.select[i - 1].valueText
          }
        }
      }
    },
  },
  mounted() {
  }
}
</script>
<style scoped>
#cornerComment {
  height: 100vh;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, .5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9;
}

.cornerComment-in {
  width: 876px;
  height: 60%;
  background: #fff;
  display: flex;
  flex-direction: column;
  border-radius: 5px;
}

.cornerComment-in-title {
  height: 50px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ddd;
  font-size: 24px;
}

.cornerComment-in-title span {
  padding: 0 10px;
}

.cornerComment-in-title span:first-child {
  flex: 1;
  font-size: 16px;
}

.cornerComment-in-footer {
  height: 50px;
  border-top: 1px solid #ddd;
  display: flex;
  align-items: center;
  padding: 0 10px;
  justify-content: center;
}

.commentBody {
  padding: 5px;
  flex: 1;
  overflow-y: auto;
}

.close-Btn-line {
  cursor: pointer;
}

.corner-left {
  flex: 1;
  background: #f8f8f8;
}

.corner-left-title {
  height: 50px;
  display: flex;
  align-items: center;
  padding-left: 10px;
}

.corner-left-title-list {
  color: #1b8de5;
  font-weight: bold;
  font-size: 24px;
  font-style: normal;
}


.corner-right {
  background: #f8f8f8;
  height: 100%;
}

.corner-student {
  overflow-y: auto;
  padding-left: 5px;
}

.corner-student-list {
  float: left;
  margin-bottom: 4px;
  margin-top: 5px;
  padding-right: 5px;
}

.corner-student-list-in {
  cursor: pointer;
  display: flex;
  border: 1px solid #999;
  border-radius: 10px;
  align-items: center;
  box-shadow: 0 2px 2px #96bedd;
  overflow: hidden;
  background: #fff;
  position: relative;
}

.corner-student-list-in:hover .corner-student-list-postion {
  box-shadow: 0 0 4px #1b8de5;
}

.corner-student-list-postion {
  position: relative;
  border-right: 1px solid #ddd;
}

.corner-student-list-img {
  position: absolute;
}

/*.corner-student-list:hover .corner-student-list-evaluate {*/
/*  display: block;*/
/*}*/
.corner-student-list-evaluate {
  display: none;
  position: absolute;
  width: 100%;
  height: 100%;
}

.corner-student-list-evaluate-min {
  display: flex;
  flex-direction: column;
  /*height: 100px;*/
  height: 100%;
}

.corner-student-list-evaluate-top {
  background: rgba(0, 0, 0, .6);
  color: #fff;
  flex: 1;
}

.corner-student-list-evaluate-top i {
  font-size: 42px;
  margin: 0;
}

.corner-student-list-evaluate-top span {
  font-size: 22px;
}

.corner-student-list-evaluate-bottom {
  height: 60px;
  text-align: center;
  line-height: 60px;
  background: #006dcd;
  color: #fff;
  font-size: 20px;
}

.evaluate-l {
  float: left;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  border-right: 1px solid #f8f8f8;
  justify-content: center;
  flex-direction: column;
  width: 33%;
  height: 100%;
}

.evaluate-r {
  border-right: 1px solid #f8f8f8;
  float: left;
  width: 33%;
  height: 100%;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  justify-content: center;
  flex-direction: column;
}

.evaluate-b {
  width: 34%;
  height: 100%;
  float: left;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  justify-content: center;
  border-top: 1px solid #fff;
  flex-direction: column;
}

.student-status-title {
  height: 20px;
  text-align: center;
  color: #fff;
}

.corner-student-list-name {
  /*text-align: center;*/
  padding: 0 5px;
  width: 215px;
}

.corner-student-list-name p {
  padding-top: 2px;
  font-size: 14px;
}

.corner-student-list-name p:first-child {
  padding-top: 5px;
  font-size: 16px;
  font-weight: bold;
}

.corner-student-list-name p i {
  font-style: normal;
}

.corner-student-list-name p i.erroTime {
  color: #d67027;
}

/*.corner-student-list-name p:last-child {*/
/*  font-size: 18px;*/
/*  color: #999;*/
/*}*/

.in-color {
  background: #1b8de5;
}

.lose-color {
  background: #ef6f14;
}

.leave-color {
  background: #444;
}

.not-color {
  background: #e28fad;
}

.not-apply-box {
  overflow-y: auto;
  padding-left: 10px;
}

.leaveUser {
  opacity: .4;
}

.showThisBox {
  display: block;
}

.back-time {
  background: #ff8c8c;
}

.successTime {
  color: #4caf50;
  font-weight: bold;
}

.clickBtn {
  color: #006dcd;
  font-weight: bold;
  text-decoration: underline;
}
</style>

